<template>
  <div class="table-container" :style="containerStyle">
    <div class="table-wrapper" :style="wrapperStyle">
      <div
        class="table-header"
        :style="headerStyle"
        :class="{ 'sticky-header': stickyHeader }"
      >
        <div class="table-row table-head">
          <div
            class="table-cell"
            v-for="(column, index) in columns"
            :key="column.key"
            :style="getColumnStyle(column, index)"
            :class="{ 'fixed-action': column.fixed && fixedAction, 'sortable': !column.fixed && showSortIndicators, 'sticky-header': stickyHeader }"
            @click="!column.fixed && showSortIndicators && handleSort(column.key)"
          >
            <slot
              :name="`header-${column.key}`"
              :column="column"
            >
              {{ column.label }}
            </slot>
            <span class="sort-indicators" v-if="!column.fixed && showSortIndicators">
              <span
                class="cursor-pointer hover:text-gray-300"
                :style="{ color: sortState.field === column.key && sortState.order === 'asc' ? sortedIndicatorColor : unsortedIndicatorColor }"
              ></span>
              <span
                class="cursor-pointer hover:text-gray-300"
                :style="{ color: sortState.field === column.key && sortState.order === 'desc' ? sortedIndicatorColor : unsortedIndicatorColor }"
              ></span>
            </span>
            <!-- 列宽调整手柄 -->
            <div 
              v-if="resizable && index < columns.length - 1"
              class="column-resizer"
              @mousedown="initResize($event, index)"
              @click.stop
            ></div>
          </div>
        </div>
      </div>
      <div class="table-body" :style="bodyStyle" @click="handleTableBodyClick">
        <div
          class="table-row"
          v-for="(item, index) in sortedData"
          :key="getRowKey ? getRowKey(item, index) : item.id || index"
          :class="getRowClass ? getRowClass(index) : getDefaultRowClass(index)"
          :style="rowStyle"
          :data-row-index="index"
        >
          <div
            class="table-cell"
            v-for="(column, colIndex) in columns"
            :key="`${index}-${column.key}`"
            :style="getColumnStyle(column, colIndex)"
            :class="{ 'fixed-action': column.fixed && fixedAction, 'sticky-action': column.fixed && fixedAction, 'editable': isColumnEditable(column) }"
            @mouseenter="handleCellMouseEnter($event, item, column)"
            @mouseleave="handleCellMouseLeave"
            @dblclick="handleCellDblClick($event, item, column, index)"
          >
            <div class="cell-content" :style="cellContentStyle">
              <slot
                :name="`column-${column.key}`"
                :item="item"
                :column="column"
                :index="index"
              >
                {{ getItemValue(item, column.key, column) }}
              </slot>
            </div>
          </div>
        </div>
        <!-- <div style="margin-top: 16px">
          <a-button type="primary" @click="showDrawer">Open</a-button>
        </div> -->
        <a-drawer
          title="Basic Drawer"
          placement="right"
          :closable="false"
          :open="open"
          width="50%"
          :get-container="false"
          :style="{ position: 'absolute' }"
          @close="onClose"
        >
          <p>Some contents...</p>
        </a-drawer>
      </div>
    </div>
  </div>
  <!-- Tooltip element -->
  <Teleport to="body">
    <div
      v-if="tooltip.visible"
      class="table-cell-tooltip"
      :style="tooltipStyle"
      @click.stop
      @mousedown.prevent
    >
      {{ tooltip.content }}
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

const open = ref(false);

const showDrawer = () => {
  open.value = true;
};

const onClose = () => {
  open.value = false;
};

interface TableColumn {
  key: string;
  label: string;
  width?: string | number;
  minWidth?: string | number;
  fixed?: boolean;
  [key: string]: any;
}

interface SortState {
  field: string;
  order: 'asc' | 'desc' | '';
}

// Tooltip相关类型定义
interface TooltipState {
  visible: boolean;
  content: string;
  x: number;
  y: number;
}

const props = withDefaults(defineProps<{
  // 数据相关
  data: any[];
  columns: TableColumn[];
  defaultSortField?: string;
  defaultSortOrder?: 'asc' | 'desc' | '';

  // 样式相关
  containerStyle?: Record<string, any>;
  wrapperStyle?: Record<string, any>;
  headerStyle?: Record<string, any>;
  bodyStyle?: Record<string, any>;
  rowStyle?: Record<string, any>;
  cellStyle?: Record<string, any>;
  cellContentStyle?: Record<string, any>;
  headerColor?: string;
  headerHoverColor?: string; // 添加表头悬停背景色属性
  headerHeight?: string; // 添加表头高度属性
  rowColors?: string[]; // 奇偶行颜色 [奇数行颜色, 偶数行颜色]
  rowHeight?: string; // 行高度
  fontSize?: string; // 字体大小

  // 功能相关
  showSortIndicators?: boolean;  // 是否显示排序指示器
  sortedIndicatorColor?: string;  // 已排序指示器颜色
  unsortedIndicatorColor?: string;  // 未排序指示器颜色
  getRowKey?: (item: any, index: number) => string | number;  // 自定义行key函数
  getRowClass?: (index: number) => string;  // 自定义行类名函数

  // 新增控制固定表头和固定操作列的属性
  stickyHeader?: boolean; // 控制是否固定表头（默认为true）
  fixedAction?: boolean;  // 控制是否固定操作列（默认为true）

  // Tooltip相关属性
  showTooltip?: boolean; // 控制是否显示tooltip（默认为true）
  showTooltipOnlyOnOverflow?: boolean; //控制是否仅在文本溢出时显示tooltip（默认为true）
  tooltipOffset?: { x: number; y: number }; // tooltip偏移量
  
  // 列宽调整相关属性
  resizable?: boolean; // 是否允许调整列宽
}>(), {
  data: () => [],
  columns: () => [],
  defaultSortOrder: '',
  containerStyle: () => ({}),
  wrapperStyle: () => ({}),
  headerStyle: () => ({}),
  bodyStyle: () => ({}),
  rowStyle: () => ({}),
  cellStyle: () => ({}),
  cellContentStyle: () => ({}),
  headerColor: '#6ACBB7', // 修改默认表头背景色
  headerHoverColor: '#6ACBB7', // 修改默认表头悬停背景色
  rowColors: () => ['white', '#E5F5F2'],
  headerHeight: '1.6vw', // 设置默认表头高度
  rowHeight: '1.6vw', // 默认行高度
  fontSize: '0.82vw', // 默认字体大小
  showSortIndicators: true,
  sortedIndicatorColor: '#fff',
  unsortedIndicatorColor: 'rgba(255, 255, 255, 0.5)',
  stickyHeader: true, // 默认固定表头
  fixedAction: true, // 默认固定操作列
  showTooltip: true, // 默认开启tooltip
  showTooltipOnlyOnOverflow: true, // 默认仅在文本溢出时显示tooltip
  tooltipOffset: () => ({ x: 10, y: 10 }), // tooltip偏移量
  resizable: true // 默认开启列宽调整功能
});

const emit = defineEmits<{
  (e: 'sort-change', sortState: SortState): void;
  (e: 'row-click', item: any, index: number, event: MouseEvent): void; // 添加行点击事件
  (e: 'row-dblclick', item: any, index: number, event: MouseEvent): void; // 添加行双击事件
  (e: 'cell-dblclick', item: any, column: TableColumn, rowIndex: number, event: MouseEvent): void; // 添加单元格双击事件
  (e: 'column-resize', columnIndex: number, newWidth: number | string): void; // 添加列宽调整事件
}>();

// 添加列宽调整相关的响应式数据
const resizing = ref(false);
const resizeData = reactive({
  columnIndex: -1,
  startX: 0,
  startWidth: 0
});

// 列宽状态管理
const columnWidths = ref<Record<string, number | string>>({});

// 初始化列宽状态，使用props中定义的宽度作为初始值
const initializeColumnWidths = () => {
  props.columns.forEach(column => {
    if (column.width) {
      // 直接使用定义的宽度值（支持vw、px等单位）
      columnWidths.value[column.key] = column.width;
    }
  });
};

// 添加防抖标志，防止排序和拖动冲突
const resizeTriggered = ref(false);

// 初始化列宽调整
const initResize = (e: MouseEvent, columnIndex: number) => {
  if (!props.resizable) return;
  
  e.preventDefault();
  e.stopPropagation(); // 阻止事件冒泡，防止触发排序
  resizing.value = true;
  resizeTriggered.value = true; // 设置标志
  resizeData.columnIndex = columnIndex;
  resizeData.startX = e.clientX;
  
  // 获取当前列的宽度
  const column = props.columns[columnIndex];
  // 优先使用已调整过的宽度，其次使用props中定义的宽度，最后使用默认值
  let currentWidth: number | string = 100; // 默认宽度100px
  
  if (columnWidths.value[column.key]) {
    currentWidth = columnWidths.value[column.key];
  } else if (column.width) {
    currentWidth = column.width;
  }
  
  // 将当前宽度转换为像素值用于计算
  if (typeof currentWidth === 'string' && currentWidth.endsWith('vw')) {
    // 将vw单位转换为像素值
    const vwValue = parseFloat(currentWidth);
    resizeData.startWidth = (vwValue / 100) * window.innerWidth;
  } else if (typeof currentWidth === 'string' && currentWidth.endsWith('px')) {
    resizeData.startWidth = parseInt(currentWidth, 10);
  } else if (typeof currentWidth === 'number') {
    resizeData.startWidth = currentWidth;
  } else {
    resizeData.startWidth = parseInt(currentWidth as string, 10) || 100;
  }
  
  // 添加全局事件监听器
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', stopResize);
  
  // 添加鼠标光标样式
  document.body.style.cursor = 'col-resize';
  document.body.style.userSelect = 'none';
  
  // 延迟重置标志
  setTimeout(() => {
    resizeTriggered.value = false;
  }, 100);
};

// 处理鼠标移动事件
const handleMouseMove = (e: MouseEvent) => {
  if (!resizing.value || resizeData.columnIndex < 0) return;
  
  const diff = e.clientX - resizeData.startX;
  let newWidth = resizeData.startWidth + diff;
  
  // 设置最小宽度限制
  if (newWidth < 30) {
    newWidth = 30;
  }
  
  // 更新列宽状态，转换为vw单位
  const columnKey = props.columns[resizeData.columnIndex].key;
  // 将像素值转换为vw单位 (1vw = 视口宽度的1%)
  const vwValue = (newWidth / window.innerWidth) * 100;
  columnWidths.value[columnKey] = `${vwValue}vw`;
  
  // 触发列宽调整事件
  emit('column-resize', resizeData.columnIndex, newWidth);
};

// 停止调整列宽
const stopResize = (e: MouseEvent) => {
  e.preventDefault();
  e.stopPropagation(); // 阻止mouseup事件冒泡
  
  resizing.value = false;
  resizeData.columnIndex = -1;
  
  // 移除全局事件监听器
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', stopResize);
  
  // 恢复鼠标光标样式
  document.body.style.cursor = '';
  document.body.style.userSelect = '';
};

// 获取列样式
const getColumnStyle = (column: TableColumn, index: number) => {
  const style: Record<string, any> = { ...props.cellStyle };

  // 使用动态列宽
  if (columnWidths.value[column.key]) {
    style.width = columnWidths.value[column.key];
  } else if (column.width) {
    // 直接使用定义的宽度值（支持vw、px等单位）
    style.width = column.width;
  }

  if (column.minWidth) {
    style.minWidth = column.minWidth;
  }

  // 为固定列设置定位属性（只有当fixedAction为true且column.fixed为true时才固定）
  if (props.fixedAction && column.fixed) {
    style.position = 'sticky';
    style.right = 0;
    style.zIndex = 11;
  }

  return style;
};

const router = useRouter();

// 添加响应式headerHeight计算
const calculatedHeaderHeight = computed(() => {
  if (props.headerHeight) {
    return props.headerHeight;
  }

  // 如果没有指定headerHeight，则根据屏幕宽度动态计算
  const viewportWidth = window.innerWidth;
  // 基于视口宽度动态计算表头高度，最小1.8vw，最大2.5vw
  const height = Math.min(2.5, Math.max(1.8, viewportWidth / 500));
  return `${height}vw`;
});

// Tooltip状态
const tooltip = reactive<TooltipState>({
  visible: false,
  content: '',
  x: 0,
  y: 0
});

// 防抖标记
let clickDebounce = false;
let lastClickTime = 0;

// 处理表格体点击事件
const handleTableBodyClick = (event: MouseEvent) => {
  // 隐藏tooltip
  hideTooltip();

  // 防止tooltip点击干扰
  if (event.target instanceof Element && event.target.closest('.table-cell-tooltip')) {
    return;
  }

  const target = event.target as HTMLElement;
  const rowElement = target.closest('.table-row');

  if (rowElement) {
    const rowIndex = parseInt(rowElement.getAttribute('data-row-index') || '-1');
    if (rowIndex >= 0 && rowIndex < sortedData.value.length) {
      const item = sortedData.value[rowIndex];

      // 检查是否为双击
      const currentTime = new Date().getTime();
      if (currentTime - lastClickTime < 300) { // 300ms内的点击视为双击
        emit('row-dblclick', item, rowIndex, event);
        lastClickTime = 0; // 重置时间
      } else {
        // 单击，设置防抖
        if (clickDebounce) return;
        clickDebounce = true;
        lastClickTime = currentTime;

        setTimeout(() => {
          if (clickDebounce) { // 如果在延迟期间没有被双击触发
            emit('row-click', item, rowIndex, event);
          }
          clickDebounce = false;
        }, 300);
      }
    }
  }
};

// 处理单元格鼠标进入事件
const handleCellMouseEnter = (event: MouseEvent, item: any, column: TableColumn) => {
  if (!props.showTooltip) return;

  const cellValue = getItemValue(item, column.key);
  // 只有当内容不为空且是字符串或数字时才显示tooltip
  if (cellValue !== null && cellValue !== undefined && (typeof cellValue === 'string' || typeof cellValue === 'number')) {
    const cellText = String(cellValue);
    const target = event.currentTarget as HTMLElement;

    // 如果配置为总是显示tooltip
    if (!props.showTooltipOnlyOnOverflow) {
      tooltip.content = cellText;
      showTooltip();
      updateTooltipPosition(event);
      return;
    }

    // 检查文本是否被截断（溢出）
    const cellContent = target.querySelector('.cell-content') as HTMLElement;
    if (cellContent) {
      // 只有当文本宽度大于容器宽度时才显示tooltip
      if (cellContent.scrollWidth > cellContent.clientWidth) {
        tooltip.content = cellText;
        showTooltip();
        updateTooltipPosition(event);
      }
    }
  }
};

// 处理单元格鼠标离开事件
const handleCellMouseLeave = () => {
  if (!props.showTooltip) return;
  hideTooltip();
};

// 显示tooltip
const showTooltip = () => {
  tooltip.visible = true;
};

// 隐藏tooltip
const hideTooltip = () => {
  tooltip.visible = false;
};

// 更新tooltip位置
const updateTooltipPosition = (event: MouseEvent) => {
  tooltip.x = event.clientX + props.tooltipOffset.x;
  tooltip.y = event.clientY + props.tooltipOffset.y;
};

// Tooltip样式
const tooltipStyle = computed(() => {
  return {
    position: 'fixed' as const,
    left: `${tooltip.x}px`,
    top: `${tooltip.y}px`,
    zIndex: 9999,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    color: 'white',
    padding: '4px 8px',
    borderRadius: '4px',
    fontSize: '12px',
    maxWidth: '300px',
    wordWrap: 'break-word' as const,
    pointerEvents: 'none' as const,
    display: tooltip.visible ? 'block' : 'none',
    userSelect: 'none' as const
  };
});

// 排序状态
const sortState = reactive<SortState>({
  field: props.defaultSortField || '',
  order: props.defaultSortOrder || ''
});

// 处理排序
const handleSort = (field: string) => {
  // 如果正在调整列宽或刚调整完列宽，则不触发排序
  if (resizing.value || resizeTriggered.value) {
    return;
  }
  
  // 如果点击的是当前排序字段，则切换排序方式
  if (sortState.field === field) {
    if (sortState.order === '') {
      sortState.order = 'asc';
    } else if (sortState.order === 'asc') {
      sortState.order = 'desc';
    } else {
      sortState.order = '';
    }
  } else {
    // 点击新字段，默认升序
    sortState.field = field;
    sortState.order = 'asc';
  }

  emit('sort-change', { ...sortState });
};

// 排序后的数据
const sortedData = computed(() => {
  // 如果没有排序字段或排序状态为无，则返回原始数据
  if (!sortState.field || sortState.order === '') {
    return props.data;
  }

  // 创建数据副本进行排序
  const dataCopy = [...props.data];

  return dataCopy.sort((a, b) => {
    const aValue = a[sortState.field];
    const bValue = b[sortState.field];

    // 处理数字字符串的比较
    const aNum = parseFloat(String(aValue).replace(/,/g, ''));
    const bNum = parseFloat(String(bValue).replace(/,/g, ''));

    if (!isNaN(aNum) && !isNaN(bNum)) {
      // 如果两个值都是数字，则按数值比较
      return sortState.order === 'asc' ? aNum - bNum : bNum - aNum;
    } else {
      // 否则按字符串比较
      const comparison = String(aValue).localeCompare(String(bValue));
      return sortState.order === 'asc' ? comparison : -comparison;
    }
  });
});

// 获取默认行类名
const getDefaultRowClass = (index: number) => {
  return index % 2 === 0 ? 'table-row-even' : 'table-row-odd';
};

// 获取项值
const getItemValue = (item: any, key: string, column?: TableColumn) => {
  // 如果列定义了formatter函数，则使用formatter函数处理值
  if (column && typeof column.formatter === 'function') {
    return column.formatter(item);
  }
  return item[key];
};

// 计算固定列的索引
const fixedColumnIndex = computed(() => {
  return props.columns.findIndex(column => column.fixed);
});

// 监听默认排序变化
watch(() => [props.defaultSortField, props.defaultSortOrder], ([newField, newOrder]) => {
  sortState.field = newField || '';
  sortState.order = (newOrder as 'asc' | 'desc' | '') || '';
});

// 组件挂载时设置初始排序
onMounted(() => {
  if (props.defaultSortField) {
    sortState.field = props.defaultSortField;
  }
  if (props.defaultSortOrder) {
    sortState.order = props.defaultSortOrder;
  }
  
  // 初始化列宽
  initializeColumnWidths();

  // 添加全局点击事件监听器，用于隐藏tooltip
  document.addEventListener('click', handleGlobalClick);
  // 添加页面隐藏事件监听器，用于在页面跳转时隐藏tooltip
  document.addEventListener('visibilitychange', handleVisibilityChange);
  // 添加路由守卫，用于在路由跳转时隐藏tooltip
  router.beforeEach(handleRouteChange);

  // 添加窗口大小变化监听器，实现响应式headerHeight
  window.addEventListener('resize', handleResize);
});

// 组件卸载时移除事件监听器
onUnmounted(() => {
  document.removeEventListener('click', handleGlobalClick);
  document.removeEventListener('visibilitychange', handleVisibilityChange);
  // 移除路由守卫
  router.beforeEach(() => {});
  // 移除窗口大小变化监听器
  window.removeEventListener('resize', handleResize);
});

// 处理全局点击事件，用于隐藏tooltip
const handleGlobalClick = () => {
  hideTooltip();
};

// 处理页面可见性变化事件，用于在页面跳转时隐藏tooltip
const handleVisibilityChange = () => {
  if (document.hidden) {
    hideTooltip();
  }
};

// 处理路由变化事件，用于在路由跳转时隐藏tooltip
const handleRouteChange = () => {
  hideTooltip();
  return true;
};

// 处理窗口大小变化
let resizeTimer: number;
const handleResize = () => {
  clearTimeout(resizeTimer);
  resizeTimer = window.setTimeout(() => {
    // 触发重新计算
    void calculatedHeaderHeight.value;
  }, 100);
};

// 处理单元格双击事件
const handleCellDblClick = (event: MouseEvent, item: any, column: TableColumn, rowIndex: number) => {
  emit('cell-dblclick', item, column, rowIndex, event);
};

// 判断列是否可编辑
const isColumnEditable = (column: TableColumn) => {
  // 可以通过在列定义中添加 editable 属性来控制是否可编辑
  return column.editable !== false;
};

// 暴露隐藏tooltip方法给父组件使用
defineExpose({
  hideTooltip
});
</script>

<style scoped>
.table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-width: 100%;
  /* border-radius: 4px; */
  border: 1px solid #e8e8e8;
  height: 100%;
}

.table-wrapper {
  width: 100%;
  min-width: 100%;
}

.table-header {
  background-color: v-bind(headerColor) !important;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
  display: flex;
  width: 100%;
  min-width: max-content;
  height: v-bind('calculatedHeaderHeight');
  min-height: v-bind('calculatedHeaderHeight');
  align-items: center;
  box-sizing: border-box;
}

/* 当stickyHeader为true时，表头固定在顶部 */
.table-header.sticky-header {
  position: sticky;
  top: 0;
  z-index: 12;
}

.table-header .table-row {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
}

.table-header .table-row.table-head {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-items: stretch;
}

.table-header .table-cell {
  color: v-bind('headerStyle && headerStyle.color ? headerStyle.color : "white"');
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: v-bind('props.fontSize');
  box-sizing: border-box;
  flex: none;
  height: 100%;
  width: 100%;
  padding: 0 2px; /* 添加少量水平内边距以改善视觉效果 */
  position: relative; /* 为调整手柄定位做准备 */
}

.table-header .table-cell.sortable {
  cursor: pointer;
  user-select: none;
}

.table-header .table-cell.sortable:hover {
  background-color: v-bind('props.headerHoverColor');
  background-clip: padding-box;
  height: 100%;
  width: 100%;
}

.table-header .table-cell.fixed-action {
  background-color: v-bind(headerColor);
}

.table-header .table-cell.fixed-action.sticky-action {
  position: sticky;
  right: 0;
  z-index: 12;
}

/* 当fixedAction为false时，不固定操作列 */
/* 删除了针对 fixedAction 为 false 时的特殊处理，由动态 class 控制 */

.table-row-even .table-cell.fixed-action {
  background-color: v-bind('props.rowColors[0]');
}

.table-row-odd .table-cell.fixed-action {
  background-color: v-bind('props.rowColors[1]');
}

.table-header .table-row:hover .table-cell.fixed-action {
  background-color: #3285c3;
  height: 100%; /* 确保固定列在悬停时也完全填充 */
}

.table-body .table-row:hover .table-cell.fixed-action {
  background-color: #e6f7ff !important;
}

.cell-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cell-label {
  margin-right: 4px;
  white-space: nowrap;
}

.sort-indicators {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.sort-indicator {
  font-size: calc(v-bind('props.fontSize') * 0.7);
  opacity: 0.5;
  transition: opacity 0.2s ease;
  display: inline-block;
}

.sort-indicator.sort-active {
  opacity: 1;
}

.sort-indicator:first-child {
  margin-right: 2px;
}

.table-body {
  flex-grow: 1;
  width: 100%;
  min-width: max-content;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  width: 100%;
  min-width: max-content;
  height: v-bind('props.rowHeight');
  min-height: v-bind('props.rowHeight');
}

.table-row:last-child {
  border-bottom: none;
}

.table-head {
  font-weight: bold;
}

.table-cell {
  padding: 4px 2px;
  border-right: 1px solid #e8e8e8;
  font-size: v-bind('props.fontSize');
  white-space: nowrap;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
  min-width: 0;
  position: relative; /* 为调整手柄定位做准备 */
}

.table-cell:last-child {
  border-right: none;
}

.table-cell.fixed-action {
  border-left: 1px solid #e8e8e8;
  border-right: none;
}

.table-cell.fixed-action.sticky-action {
  position: sticky;
  right: 0;
  z-index: 11;
}

.table-row-even .table-cell.fixed-action {
  background-color: v-bind('props.rowColors[0]');
}

.table-row-odd .table-cell.fixed-action {
  background-color: v-bind('props.rowColors[1]');
}

.table-header .table-row:hover .table-cell.fixed-action {
  background-color: #3285c3;
}

.table-body .table-row:hover .table-cell.fixed-action {
  background-color: #e6f7ff !important;
}

.cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  box-sizing: border-box;
}

.table-row-even {
  background-color: v-bind('props.rowColors[0]');
}

.table-row-odd {
  background-color: v-bind('props.rowColors[1]');
}

.table-body .table-row:hover {
  background-color: #e6f7ff !important;
}

.sort-indicators {
  margin-left: 2px;
}

/* 列宽调整手柄样式 */
.column-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  z-index: 10;
}

.column-resizer:hover,
.column-resizer:active {
  background-color: #6ACBB7;
  border-radius: 2px;
}

.table-cell-tooltip {
  user-select: none;
}
</style>
